<!-- xingzhuang -->
<template>
  <div class="graph_container globalDIv">
    <div v-for="(item, i) in pages" :key="i" class="globalDIv">
      <div class="globalDIv" :style="{ zIndex: page === item ? 10 : -i }">
        <canvas :id="`canvas${item}`" :width="clientWidth" :height="clientHeight" class="graph" />
      </div>
    </div>
    <div id="shanchu" :src="closeImg">X</div>
  </div>
</template>

<script>
import closeImg from '../../../assets/teaching/closefangdajing.svg';
import xzCanvas from './xingzhuang';

export default {
  props: {
    page: Number,
    pages: Number,
    icon: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      iconDraw: '',
      clientWidth: 0,
      clientHeight: 0,
      clearDraw: false,
      canvasArr: [],
      closeImg,
    };
  },
  watch: {
    icon: {
      // 监听的对象
      handler(v) {
        this.iconDraw = v && v.icon;
        this.colorDraw = v && v.color;
        this.sizeDraw = v && v.size;
        this.clearDraw = v && v.clear;
        // console.log('icon 发生了变化 =====> ', v);
        this.$nextTick(() => {
          xzCanvas(this);
        });
      },
      // 深度监听设置为 true
      deep: true,
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.refreshSize);
  },
  created() {},
  mounted() {
    window.addEventListener('resize', this.refreshSize);
    this.refreshSize();
  },
  methods: {
    refreshSize() {
      const { innerWidth, innerHeight } = window;
      // console.log('innerWidth, innerHeight =====> ', innerWidth, innerHeight)
      this.clientWidth = innerWidth;
      this.clientHeight = innerHeight;
    },
  },
};
</script>
<style lang="scss" scoped>
.globalDIv {
  width: 100vw;
  height: 100%;
}

.graph_container {
  position: absolute;
  top: 0;
  z-index: 20;

  .graph {
    background: rgba(0, 0, 0, 0.1);
  }
}

#shanchu {
  display: none;
  position: fixed;
  top: -100px;
  left: -100px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
</style>
